<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-form
        :inline="true"
        :model="filters"
        :size="size"
        ref="filters"
        class="border"
        style="margin-bottom: 15px;"
      >
        <div style="width: 100%;">
          <el-form-item style="width:32%">
            <span style="color: #999;">活动名称：</span>
            <span style="margin-left:10px;">非会员001</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">活动ID：</span>
            <span style="margin-left:10px;">1911220011038757</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">当前状态：</span>
            <span style="margin-left:10px;">进行中</span>
          </el-form-item>
        </div>
      </el-form>
      <el-form
        :inline="true"
        :model="filters"
        :size="size"
        ref="filters"
        style="text-align: center;"
      >
        <!-- <el-button type="primary">查看营销报告</el-button> -->
      </el-form>
    </div>
    <div class="tab-container">
      <el-alert :closable="false" style="background-color: #ffffff;color: #ffffff;" title type="success"/>
      <el-tabs type="border-card">
        <div style=" height: 110px;">
          <el-row class="t_r pb20">
            <el-button size="mini" type="primary" @click="productSelectionModal()">添加追加商品</el-button>
            <el-button size="mini" type="danger" v-show="modalShow==1" @click="delMerchantProducts()">批量删除</el-button>
            <el-button size="mini" type="primary" v-show="modalShow==2" @click="batchReAdd()">批量重新添加</el-button>
          </el-row>
          <el-button-group style="float:right;">
            <el-button size="mini" @click="importCommodityModal(1)">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
            <el-button size="mini" @click="importCommodityModal(2)">商品导入<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-button-group>
        </div>
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="生效商品(1)" name="0">
            <div>
                <div style="margin-top: 20px;float: right;">
                    <el-button-group>
                        <el-button size="mini" style="float: left;" type="info"  icon="el-icon-edit" @click="showBatchSetUp()">批量设置</el-button>
                        <el-button size="mini" style="float: left;" type="info"  icon="el-icon-search"  @click="showQueryCondition()">搜索</el-button>
                    </el-button-group>
                </div>
                <div >
                  <div style="padding-top: 40px;padding-bottom: 20px;" v-show="setUp">
                    <el-form :model="dataForm" :inline="true">
                        <el-form-item label="商品名称">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品编号">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品品牌">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品条码">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商家">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                      <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">保存</el-button>
                    </div>
                  </div>
                  <div style="padding-top: 40px;padding-bottom: 20px;" v-show="search">
                    <el-form :model="dataForm" :inline="true">
                        <el-form-item label="商品条码">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品编号">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商家">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <el-input v-model="dataForm.key" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div style="margin-bottom: 20px;float: right;margin-right: 13.8%;">
                      <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">查询</el-button>
                      <el-button size="mini" style="float: left;" type="primary" @click="batchReAdd()">重置</el-button>
                    </div>
                  </div>
                </div>
            </div>
            <div>
              <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="address" label="商品条码"></el-table-column>
                <el-table-column prop="unit" label="计量单位"></el-table-column>
                <el-table-column prop="shopName" label="商家名称"></el-table-column>
                <el-table-column prop="price" label="统一零售价（元）"></el-table-column>
                <el-table-column prop="markdown" label="直降（元）"></el-table-column>
                <el-table-column prop="shopLimit1" label="商家单渠道限购"></el-table-column>
                <el-table-column prop="shopLimit2" label="店铺单渠道限购"></el-table-column>
                <el-table-column prop="shopLimit3" label="个人单渠道限购"></el-table-column>
                <el-table-column prop="address" label="订单限购"></el-table-column>
              </el-table>
            </div>
            <div style="margin-top: 10px;">
              <el-button size="mini" type="primary" @click="updatePriceAndLimit()">确认添加</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="互斥商品(0)" name="1">
            <el-table border style="width: 100%" @selection-change="repelSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
              <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="address" label="商品条码"></el-table-column>
              <el-table-column prop="unit" label="计量单位"></el-table-column>
              <el-table-column prop="shopName" label="商家名称"></el-table-column>
              <el-table-column prop="price" label="互斥记录时间"></el-table-column>
              <el-table-column prop="markdown" label="操作"></el-table-column>
            </el-table>
            <div style="margin-top: 10px;">
              <el-button size="mini" type="primary" @click="promotionPriceCheckAndSubmit()">确认添加</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tabs>
    </div>
    <!--新增编辑界面-->
    <el-dialog :title="'添加商品'" :inline="true" width="65%" :visible.sync="productVisible" :close-on-click-modal="false">
      <div>
        <el-form :model="dataForm" label-width="100px" ref="dataForm" :size="size">
           <el-row class="search-input">
              <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品名称：">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品编号：">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品条码：">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品类别：">
              <TreeSelect :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion" @getValue="getValue($event)" @check-change="handleCheckChange"/>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商品品牌：">
                <el-select v-model="value6" multiple placeholder="请选择" collapse-tags>
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          <!-- </div> -->
          <!-- <div class="col-sm-9"> -->
            <el-form-item label="商家名称：">
                <el-select v-model="value5" multiple placeholder="请选择" collapse-tags>
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          <!-- </div> -->
           </el-row>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table :data="tableData" border style="width: 100%" @selection-change="addSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="商品编号" width="180"></el-table-column>
          <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="address" label="商品条码"></el-table-column>
          <el-table-column prop="unit" label="计量单位"></el-table-column>
          <el-table-column prop="shopName" label="商品品牌"></el-table-column>
          <el-table-column prop="price" label="商品类别"></el-table-column>
          <el-table-column prop="markdown" label="所属商家名称"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="productVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">确定</el-button>
      </div>
    </el-dialog>

      <!--新增编辑界面-->
    <el-dialog :title="operation?'商品导入':'下载模板'" :inline="true" width="20%" :visible.sync="uploadVisible" :close-on-click-modal="false">
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation">商品导入模板</el-button>
        <el-button type="primary" icon="el-icon-upload" v-show="operation==false">商品导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPaneCreateGroupon";
import TreeSelect from "@/views/Core/TreeSelect";
export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog,
    TreeSelect
  },
  data() {
    return {
      size: "small",
      productVisible: false,
      uploadVisible: false,
      operation: false, // true:商品导入, false:下载模板
      activeName: 0,
      setUp:false,
      search:false,
      filters: {},
      editLoading: false,
      dataForm: {},
      modalShow: 1,
      multipleSelection: [],
      repelSelection: [],
      addSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      tableData: [
        {
          id: 1912250010887324,
          productName: "新供应商001",
          unit: "件",
          shopName: "张小二服饰",
          price: 1.2,
          markdown: 1,
          shopLimit1: 100,
          shopLimit2: 100,
          shopLimit3: 100
        }
      ],
      options: [{
        value: '1',
        label: '京东直营'
      }, {
        value: '2',
        label: '淘宝旗舰'
      }, {
        value: '3',
        label: '良品铺子1店'
      }],
      value5: [],
      options2: [{
        value: '1',
        label: '良品铺子'
      }],
      value6: [],
      isClearable:true,      // 可清空（可选）
      isAccordion:true,      // 可收起（可选）
      valueId:20,            // 初始ID（可选）
      props:{                // 配置项（必选）
        value: 'id',
        label: 'name',
        children: 'children',
        // disabled:true
      },
      // 选项列表（必选）
      list:[
        {id:2,parentId:0,name:"居家生活",rank:1},
        {id:4,parentId:0,name:"数码家电",rank:1},
        {id:5,parentId:0,name:"母婴保健",rank:1},
        {id:6,parentId:0,name:"美食酒水",rank:2},
        {id:7,parentId:0,name:"个护清洁",rank:2},
        {id:9,parentId:0,name:"好物甄选",rank:2},

        {id:101,parentId:2,name:"个护健康",rank:3},
        {id:102,parentId:2,name:"3C数码",rank:4},
        {id:103,parentId:2,name:"汽车用品",rank:5},
        {id:202,parentId:101,name:"按摩电器",rank:5},
        {id:203,parentId:101,name:"个护美容",rank:5}
      ]
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    repelSelectionChange(val){
      this.repelSelection = val;
    },
    addSelectionChange(val) {
      this.addSelection = val;
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "0") {
        // 触发‘配置管理’事件
        this.first();
      } else {
        // 触发‘用户管理’事件
        this.second();
      }
    },
    first() {
      console.log("生效商品");
      this.modalShow = 1;
    },
    second() {
      console.log("互斥商品");
      this.modalShow = 2;
    },
    //添加商品弹窗
    productSelectionModal() {
      this.productVisible = true;
    },
    showBatchSetUp(){
      if(this.search==true){
        this.search=false;
      }
      if(this.setUp ==false){
        this.setUp = true;
      }else if(this.setUp ==true){
        this.setUp = false;
      }
    },
    showQueryCondition(){
      if(this.setUp==true){
        this.setUp=false;
      }
      if(this.search ==false){
        this.search = true;
      }else if(this.search ==true){
        this.search = false;
      }
    },
    batchReAdd(){
      if(this.multipleSelection.length<1){
        this.$message({ message: "请选择要设置的商品", type: "error" });
        return false;
      }
      this.$message({ message: "操作成功", type: "success" });
    },
    updatePriceAndLimit(){

    },
    importCommodityModal(val){
      if(val===1){
        this.operation = true;
      }else if(val==2){
        this.operation = false;
      }
      this.uploadVisible = true;
    },
    submitForm(){
      this.productVisible =false;
    },
    // 取值
    getValue(value){
      this.valueId = value
      console.log(this.valueId);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
        console.log(this.$refs.selectTree);
    },
  },
  computed:{
    /* 转树形数据 */
    optionData(){
      let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
      return  cloneData.filter(father=>{                      // 循环所有项，并添加children属性
          let branchArr = cloneData.filter(child=>father.id == child.parentId);       // 返回每一项的子级数组
          branchArr.length>0 ? father.children=branchArr : ''   //给父级添加一个children属性，并赋值
          return father.parentId==0;      //返回第一层
      });
    }
  },
  mounted() {}
};
</script>

<style scoped lang='scss'>
.border {
  color: #666666;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  border-bottom: 1px solid #666666;
  padding-bottom: 3px;
}

.pdL10 {
  padding-left: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.border-left {
  border-left: 3px #ddd solid !important;
}
.font-bold {
  font-weight: 700;
}
.form-group {
  margin-bottom: 15px !important;
  margin-right: -0px !important;
  margin-left: -0px !important;
}
.form-horizontal .control-label {
  padding-top: 5px;
  margin-bottom: 0;
  text-align: right;
}
.form-horizontal div {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
  font-size: 12px;
  color: #666666;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  word-wrap: break-word;
}
.form-horizontal .control-label {
  padding-top: 3px !important;
}
.col-sm-2 {
  width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
  float: left;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mgt15 {
  margin-top: 15px;
}
.pb20{
  padding-bottom: 20px;
}
.el-tabs--border-card>.el-tabs__content {
   padding: 0px 15px;
}
</style>
